<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    width="800px"
  >
    <template slot="title">
      <el-tabs
        v-model="listQuery.type"
        @tab-click="handleTabClick"
        tab-position="top"
        class="mb-20"
      >
        <el-tab-pane label="本地上传" name="1"> </el-tab-pane>
        <el-tab-pane label="系统图库" name="0"> </el-tab-pane>
      </el-tabs>
    </template>
    <el-row :gutter="15" class="" class="course_cover" style="height: 300px">
      <div class="el-upload-list el-upload-list--picture-card">
        <SingleImg
          class="el-upload-list__item is-success"
          style="width: 164px; height: 96px"
          v-if="listQuery.type == '1'"
          modular="course"
          type="annexpic"
          v-model="dataForm.cover"
          tip="封面"
          @input="handleUploadSuccess"
        />
        <li
          v-for="(item, index) in list"
          :key="index"
          class="el-upload-list__item is-success"
        >
          <el-image
            :src="define.comUrl + item.cover"
            class="el-upload-list__item-thumbnail"
            :z-index="10000"
            style="width: 164px; height: 96px"
            ref="image"
            fit="cover"
            @click="handleSelectCover(item)"
          />
          <span
            v-if="item.id == selectCover.id"
            style="position: absolute; right: 2px; bottom: 2px; color: #67c23a"
          >
            <el-button
              size="mini"
              round
              type="success"
              icon="el-icon-check"
              circle
            ></el-button>
          </span>
        </li>
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
      <el-button type="primary" @click="handleSureSelect"> 确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import SingleImg from "@/components/upload/SingleImg";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";

export default {
  components: { SingleImg },
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      isDetail: false,
      dataForm: {
        cover:
          "/api/file/Image/annexpic/2024/09/05/course/20240905_601516264434697605.jpg",
        type: "1",
        objectJson: "",
      },
      list: [],
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
        type: "1",
      },
      selectCover: {},
      rules: {},
      typeOptions: [
        { fullName: "默认", id: "0" },
        { fullName: "自定义", id: "1" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleUploadSuccess(coverUlr, data) {
      this.dataForm.cover = coverUlr;
      this.dataForm.objectJson = JSON.stringify(data);
      if (this.dataForm.cover) {
        this.dataFormSubmit();
      }
    },
    handleSelectCover(item) {
      this.selectCover = item;
    },
    handleSureSelect() {
      this.visible = false;
      if (this.selectCover.cover) {
        this.$emit(
          "selectComplete",
          this.selectCover.cover,
          this.selectCover.objectJson
        );
      }
    },
    handleTabClick(tab, event) {
      this.dataForm.type = tab.index;
      this.initData();
    },
    initData() {
      this.dataForm.cover = "";
      this.listLoading = true;
      this.visible = true;
      request({
        url: `/api/course/TemsCourseCover/getList`,
        method: "post",
        data: this.listQuery,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.request();
    },
    request() {
      request({
        url: "/api/course/TemsCourseCover",
        method: "post",
        data: this.dataForm,
      }).then((res) => {
        this.$message({
          message: res.msg,
          type: "success",
          duration: 1000,
          onClose: () => {
            this.visible = false;
            this.$emit(
              "selectComplete",
              this.dataForm.cover,
              this.dataForm.objectJson
            );
          },
        });
      });
    },
  },
};
</script>
<style>
.course_cover .singleImg-container .el-upload-list {
  width: 162px !important;
  height: 96px !important;
}
.course_cover .singleImg-container .img-uploader-icon {
  width: 162px !important;
  height: 96px !important;
}
.course_cover .singleImg-container .el-upload-list .el-upload-list__item {
  width: 162px !important;
  height: 96px !important;
}
.course_cover .singleImg-container .el-upload-list .el-image {
  width: 162px !important;
  height: 96px !important;
}
.course_cover .el-upload-list__item {
  width: 162px !important;
  height: 96px !important;
}
</style>
